<template>
	<view class="swiper-box" v-if="list.length > 0">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in list" :key="index" :data-jump_type="item.jump_type" :data-jump_value="item.jump_value" @tap="jumpToTarget">
						<image :src="item.image" mode="aspectFill" class="swiper-item-image"></image>
						<view class="description">{{ item.description }}</view>
				</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			propsList: {
				type: Array,
				default: () => {return []}
			}
		},
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				list: []
			};
		},
		watch: {
			propsList(n, o) {
				this.list = this.$props.propsList
			}
		},
		methods: {
			jumpToTarget(e) {
				console.log('jumpToTarget', e)
				let dataset = e.currentTarget.dataset
				if (dataset.jump_type == "1") {
					uni.navigateTo({
						url: '/pages/topic-comment/topic-comment?tid=' + dataset.jump_value
					})
				} else if (dataset.jump_type == "2") {
					uni.navigateTo({
						url: '/pages/web-view/web-view?url=' + dataset.jump_value
					})
				} else {
					throw new Error('不支持的跳转类型')
				}
			}
		}
	}
</script>

<style lang="scss">
.swiper-box {
	border-bottom: 10upx solid #eee;
	.swiper {
		height: 400upx;
		uni-image {
			width: 100%;
			height: 100%;
		}
		.description {
			display: block;
			width: 100%;
			text-align: center;
			background-color: rgba($color: #000000, $alpha: 0.2);
			position: absolute;
			bottom: 0;
			color: #fff;
		}
		.swiper-item-image {
			width: 100%
		}
	}
}

</style>
